<template>
    <div>
        <el-dialog v-model="dialogVisible" width="80%" align-center :close-on-click-modal="false" :show-close="false"
            :before-close="handleClose" destroy-on-close draggable>
            <template #header="{ close }">
                <div class="dialog-header flex justify-between items-center">
                    <div>指派专家</div>
                    <el-icon class="el-icon--left cursor-pointer" @click="close">
                        <CircleCloseFilled color="#fff" />
                    </el-icon>
                </div>
            </template>
            <!-- 基本信息 -->
            <div class="bg-white mt-[10px]">
                <BaseHead>基本信息</BaseHead>
                <div class="p-[10px]">

                    <el-row :gutter="200">
                        <el-col :span="12">
                            <div class="flex items-center"><span style="width: 90px;">项目学科:</span> <el-select
                                    v-model="searchForm.subjectId" @change="changeSubject">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option v-for="item in subjectList" :key="item.id" :label="item.label"
                                        :value="item.id"></el-option>
                                </el-select></div>

                        </el-col>
                        <el-col :span="12">
                            <div class="flex items-center"><span style="width: 90px;">专家分组 :</span> <el-select
                                    v-model="searchForm.expertGroupListId" @change="getexpertListByGroupMet">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option v-for="item in expertGroupList" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select></div>

                        </el-col>
                    </el-row>

                </div>
            </div>
            <div class="bg-white mt-[10px]">
                <div class="tips"> 1、评审专家不能评审自己参与的项目；2、勾选或去掉专家会立即保存。</div>
                <el-table :data="xzcgTable" border style="width: 100%">
                    <el-table-column prop="subjectId" label="项目学科" :formatter="formatsubjectId" />
                    <el-table-column prop="honorName" label="项目名称" />
                    <el-table-column label="项目成员">
                        <template #default="scope">
                            <span type="primary" v-for="(item, index) in scope.row.authorList1" :key="item.id">{{
            item.name
        }}<span v-if="index + 1 != scope.row.authorList1.length">,</span></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="selectExpert" label="评审专家">
                        <template #default="scope">
                            <div class="flex flex-wrap items-center"><span class="flex items-center mr-1.5"
                                    v-for="(item, index) in scope.row.selectExpertList" :key="item">{{
            JSON.parse(item).name
        }}<el-icon>
                                        <CircleClose class="cursor-pointer" @click="delExpert(scope.row, index)" />
                                    </el-icon></span></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="学科专家" width="460">
                        <template #default="scope">
                            <el-checkbox-group v-model="scope.row.selectExpertList" @change="changeExpert(scope.row)">
                                <el-checkbox v-for="item in allExpertList" :key="item.id"
                                    :disabled="disabledExpert(scope.row,item)" :label="item.name" :value="item.idStr" />
                            </el-checkbox-group>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <div class="operate-btns">
                        <el-button type="primary" @click="close">关闭</el-button>
                    </div>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import { getexpertGroupList, getexpertListByGroup, getallExpertList, addReviewExpert } from "@/api/achievement/cghj"
import { getCategory } from "@/api/system/category"
import _ from 'lodash';
const props = defineProps({
    xzcgList: Array,
    reviewSchemeId: String,
    reviewPlanId: String,
})

const dialogVisible = defineModel();

const searchForm = ref({
    subjectId: '',
    expertGroupListId: ''
})
const emit = defineEmits(['callBack']);
const handleClose = (done) => {
    emit('callBack', "")
    done();
}
const close = () => {
    dialogVisible.value = false;
    emit('callBack', "")
}

const expertGroupList = ref([])
const allExpertList = ref([])
const getexpertGroupListMet = () => {
    getexpertGroupList().then(res => {
        expertGroupList.value = res.data

    })
}
const getexpertListByGroupMet = () => {
    if (searchForm.value.expertGroupListId == '' || searchForm.value.expertGroupListId == null) {
        getallExpertList().then(res => {
            allExpertList.value = res.data
            allExpertList.value.forEach(item => {
                Reflect.set(item, 'idStr', JSON.stringify(item))
            })

        })
    } else {
        let parms = {
            id: searchForm.value.expertGroupListId
        }
        getexpertListByGroup(parms).then(res => {
            allExpertList.value = res.data
            allExpertList.value.forEach(item => {
                Reflect.set(item, 'idStr', JSON.stringify(item))
            })
        })
    }


}
const subjectList = ref([])
const kjxkflList = ref([])
const skxkflList = ref([])
const xzcgTable = ref([])

const getCategoryMet = async () => {
    let parms = {
        bizName: "一级学科",
        valueCascade: '2'
    }
    let res = await getCategory(parms)
    if (res.code == 200) {
        kjxkflList.value = res.data
    }
}
const getCategoryMet1 = async () => {

    let parms1 = {
        bizName: "一级学科",
        valueCascade: '1'
    }
    let res1 = await getCategory(parms1)
    if (res1.code == 200) {
        skxkflList.value = res1.data
    }
}
const formatsubjectId = (row, column, cellValue, index) => {
    if (subjectList.value.length && cellValue) {
        return subjectList.value.find(item => item.id == cellValue) ? subjectList.value.find(item => item.id == cellValue).label : ''
    } else {
        return ''
    }


}



const changeSubject = () => {
    if (searchForm.value.subjectId == '' || searchForm.value.subjectId == null) {
        xzcgTable.value = props.xzcgList
    } else {
        xzcgTable.value = props.xzcgList.filter(item => {
            return item.subjectId == searchForm.value.subjectId
        })
    }


}

const changeExpert = (i) => {
    console.log(i, 'selectExpertList');
    let parms = {
        honorApplyBookId: i.id,
        honorName: i.honorName,
        reviewPlanId: props.reviewPlanId,
        reviewSchemeId: props.reviewSchemeId,
    }
    parms.expertDTOS = _.cloneDeep(i.selectExpertList)
    parms.expertDTOS = parms.expertDTOS.map(item => JSON.parse(item));
    addReviewExpert(parms).then(res => {

    })
}

const delExpert = (i, j) => {
    i.selectExpertList.splice(j, 1);
    changeExpert(i)
}


const disabledExpert = (i, j) => {
    let havedisabled = i.authorList1.some(item => {
        return item.id == j.personId
    })
    return havedisabled
}
watch(
    () => props.xzcgList,
    (newValue) => {
        xzcgTable.value = _.cloneDeep(newValue)

        subjectList.value = []
        let zaArr = xzcgTable.value.map(item => {
            return item.selectExpertId ? item.selectExpertId : '';
        })
        xzcgTable.value.forEach((item, index) => {
            item.selectExpertList = allExpertList.value.filter(item1 => {
                return zaArr[index].includes(item1.id)
            })
            item.selectExpertList = item.selectExpertList.map(item => item.idStr);
        })
        console.log(xzcgTable.value, ' xzcgTable.value');
        newValue.forEach(element => {
            let zcArr = kjxkflList.value.filter(item => {
                return item.id == element.subjectId
            })
            let zcArr1 = skxkflList.value.filter(item => {
                return item.id == element.subjectId
            })
            subjectList.value = [...subjectList.value, ...zcArr, ...zcArr1]
        });
        console.log(subjectList.value);
    },
    { deep: true }
);

getCategoryMet()
getCategoryMet1()
getexpertGroupListMet()
getexpertListByGroupMet()
</script>
<style scoped lang="scss">
@import url("@/views/achievement/index.scss");

.tips {
    color: rgb(255, 0, 0);
    font-size: 12px;
    padding-top: 12px;
    padding-left: 8px;
}
</style>
